【Middleman】でモダンにHTMLファイルを出力してみる。
前回に引き続き、Middlemanで静的なサイトを構築してみたいと思います。
実際に、Middlemanを使用して、ベーシックなhtmlテンプレートを出力してみます。
その際に、Middlemanの特徴の一つとして「Layout機能、Partial機能」を使用して、構築したいと思います。
アジェンダ
- ディレクトリ構造のおさらい。
- レイアウトの考え方
- Frontmatter(ページ固有変数)
- 実際に作成してみる。
- まとめ
ディレクトリ構造のおさらい。
プロジェクトフォルダを作成
まず、作業するディレクトリに移動後、以下コマンドから 「sample」というプロジェクトフォルダを作成します。
$ middleman init sample
ディレクトリ構造を確認
作成した「sample」フォルダ内を確認すると、以下の様な構成になります。
注目して頂きたい箇所として「source/layouts/」フォルダになります。 この「layouts」に、サイト内で使用する、レイアウトファイル（中身は、ほぼHTMLファイルを拡張したデータ）を格納していきます。
また、あまり見慣れない.html.erb、.erb拡張子がありますね。これは、HTMLファイルを作成するためのテンプレートファイルの拡張子になります。
Middlemanでは、デフォルトはERbファイルですが、その他にもSlimファイルやHamlファイル等が使えます。
詳しくはっこちらからご確認ください。
レイアウトの考え方
「Layout機能」について、解説していきます。
WordPress等で、サイト制作していた自分としては、最初この理解するのにつまづきました。
WordPress等でおなじみのレイアウトイメージ
WordPress等のCMSでおなじみのレイアウト構成ですね。共有するheader.phpと、footer.phpをsample-a.php、sample-b.phpに埋め込むといった感じです。
上記はシンプルで理解しやすい構造いいのですが、、、案件等で、もう少し複雑化したレイアウト等が、急遽レイアウトを変更しないといけない場合
各ファイルを修正しないといけなかったりと手間だったりします。(あまりこのような事態は発生してほしくないのですが、、、)
Middlemanのレイアウトイメージ
Middlemanは上記とは違うアプローチを取ります。
以下、Middleman日本語ページより引用
レイアウトはすべてのテンプレート間で共有する, 個別ページを囲むための共通の HTML の使用を可能にします。PHP 開発経験のある開発者はページ毎に, その上部と下部に "header" や "footer" への参照をもつ使い方を使用したことがあるでしょう。Ruby と Middleman では逆のアプローチを取ります。"layout" は "header" や "footer" 両方を含み個別ページのコンテンツを囲みます。
若干複雑な図になってしまいましたが、順番に解説してみます。
(1)テンプレートファイル
sample.html.erbファイルは、Frontmatter : ページ固有の変数(こちら後述します)とページのコンテンツのみを記載します。
(注意)このファイルは、headerやfooterなどのレイアウト構成は持たず、あくまでページ固有の情報を記載します。
Frontmatterの「layout : sample」と記述することで、反映するレイアウトを指定することができます。
また、レイアウトの変更が容易なのが魅力です。
(2)Layout（レイアウト）機能
実際にレイアウトの構成を持つのが、「source/layouts」に格納されているレイアウトファイルになります。
Frontmatterで指定した、変数もこのファイルに読み込まれ、レイアウト内に反映することができます。
(3)Partial（パーシャル）機能
Partial機能は、PHPのincrudeと似ており、指定したファイルを読み込むことができます。
また、変数を渡すことも可能です。指定する変数によって表示を切り替える等の使い方もできそうですね。
（注）パーシャルで読み込むレイアウトファイルは頭文字に_(アンダーバー)をつけるルールです。
詳しくはこちらをご参照してください。
Frontmatter(ページ固有変数)
以下、Middleman日本語ページより引用
Frontmatter は YAML 形式でテンプレート上部に含めることができるページ固有の変数です。
変数の宣言方法は、---で囲った内部で宣言します。
以下を例にして、test.htmlを出力してみます。
テンプレートファイル
source/test.html.erb
--- layout: test title: テスト keywords: Test description: テストファイルです。 headline: テストファイルの見出し --- <div class="entry"> <p>テスト文言</p> </div>
レイアウトファイル
source/layouts/test.erb
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title><%= data.page.title %></title><!-- title変数の値を表示 --> <meta name="keywords" content="<%= data.page.keywords %>"><!-- keywords変数の値を表示 --> <meta name="description" content="<%= data.page.description %>"><!-- description変数の値を表示 --> </head> <body> <h1><%= data.page.headline %></h1><!-- headline変数の値を表示 --> <%= yield %><!-- ページ内コンテンツを表示 --> </body> </html>
出力されるHTMLファイル
build/test.html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>テスト</title> <meta name="keywords" content="Test"> <meta name="description" content="テストファイルです。"> </head> <body> <h1>テストファイルの見出し</h1> <div class="entry"> <p>テスト文言</p> </div> </body> </html>
実際に作成してみる。
一連の流れで、ベーシックなHTMLを作成してみたいと思います。
ディレクトリ構造は以下とします。
テンプレートファイル
source/sample.html.erb
--- layout: sample #ここでサンプルレイアウトを指定 title: サンプルテンプレート description: サンプルテンプレートですよ〜！ keywords: サンプル --- <div class="entry"> <h1>見出し</h1> <p>コンテンツ文言</p> </div>
レイアウトファイル
source/layouts/sample.erb
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title><%= data.page.title %></title>
<meta name="keywords" content="<%= data.page.keywords %>">
<meta name="description" content="<%= data.page.description %>">
</head>
<body>
<%= partial "layouts/header" %><!-- パーシャル機能で、_header.erbを読み込む -->
<div id="contents">
<%= yield %><!-- ページコンテンツを反映 -->
</div>
<%= partial "layouts/footer" %><!-- パーシャル機能で、_footer.erbを読み込む -->
</body>
</html>
source/layouts/_header.erb
<header id="header"> <!-- ヘッダー内容 --> </header><!-- / #header -->
source/layouts/_footer.erb
<footer id="footer"> <!-- フッター内容 --> </footer><!-- / #footer -->
出力されるHTMLファイル
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>サンプルテンプレート</title> <meta name="keywords" content="サンプル"> <meta name="description" content="サンプルテンプレートですよ〜！"> </head> <body> <header id="header"> <!-- ヘッダー内容 --> </header><!-- / #header --> <div id="contents"> <div class="entry"> <h1>見出し</h1> <p>コンテンツ文言</p> </div> </div> <footer id="footer"> <!-- フッター内容 --> </footer><!-- / #footer --> </body> </html>
まとめ
今回はERbを使用してHTMLの出力みましたが、Slim、Hamlなど様々な中間メタ言語と呼ばれる言語に対応してくれていて便利です。
また、案件によっては大量の静的なHTMLで開発する場合も少なからずあるので、そういった場合はMiddlemanをジェネレータとして採用してみるのもいいかと思います。
